import ChartBase from './chart-base'
import { deepClone, mergeObject } from '@/utils'

export default class MapBar extends ChartBase {
  constructor() {
    super()
  }

  //基础描述
  _info = {
    name: '柱形地图',
    type: 'map-bar',
    group: 'map',// 图表分类
    component: 'Map',
    icon: 'map-base'// 图表展示ICON
  }

  // 总 配置项
  _defaultOption = {
    tooltip: {
      show: true,
      trigger: 'item'
    },

    geo: { // 这个是重点配置区
      map: 'china',
      aspectScale: 0.75, //长宽比
      zoom: 1.1,
      roam: false,
      itemStyle: {
        areaColor: '#274d68',
        shadowColor: '#3A73C0',
        shadowOffsetX: 2,
        shadowOffsetY: 11,
        emphasis: {
          areaColor: '#2AB8FF',
          borderWidth: 0,
          color: 'green',
          label: {
            show: false
          }
        }

      },
      regions: [{
        name: '南海诸岛',
        opacity: 0,
        itemStyle: {
          areaColor: 'rgba(0, 10, 52, 1)',
          borderColor: 'rgba(0, 10, 52, 1)',
          opacity: 0,
          label: {
            show: false,
            color: '#009cc9'
          }
        }
      }]
    },
    series: []
  }

  // 系列
  _defaultSeries = {}

  _defaultMapSeries = {
    type: 'map',
    tooltip: {
      show: false
    },
    zoom: 1.1,
    map: 'china',
    roam: false,
    selectedMode: false, //取消点击后出现黄色高亮
    label: {
      show: true,
      textStyle: {
        color: '#000000'
      },
      emphasis: {
        textStyle: {
          color: '#000000'

        }
      },
      fontSize: 12
    },

    itemStyle: {
      borderColor: '#93EBF8',
      borderWidth: 1,
      areaColor: '#274d68',
      emphasis: {
        label: {
          show: false,
        },
        areaColor: '#2EE5CE',
        borderColor: '#93EBF8',
        borderWidth: 1,
      }
    }
  }

  _barOption = {
    xAxis: [{
      id: '', // 组件id，在配置中引用标识
      gridId: '', // x轴所在的grid的索引
      type: 'category', // 坐标轴类型
      name: '', // 坐标轴名称
      nameLocation: 'middle', // 坐标轴名称显示位置
      nameGap: 3, // 坐标轴名称与轴线之间的距离
      show: true,
      splitLine: { // 坐标轴在 grid 区域中的分隔线
        show: false
      },
      axisTick: { // 坐标轴刻度
        show: false
      },
      axisLabel: { // 坐标轴刻度标签
        show: false
      },
      axisLine: { // 坐标轴轴线
        onZero: false,
        lineStyle: {
          color: '#666'
        }
      },
      z: 100
    }],//X轴配置
    yAxis: [{
      id: '', // 组件id，在配置中引用标识
      gridId: '', // y轴所在的grid的索引
      splitLine: { // 坐标轴在 grid 区域中的分隔线
        show: false
      },
      axisTick: { // 坐标轴刻度
        show: false
      },
      axisLabel: { // 坐标轴刻度标签
        show: false
      },
      axisLine: { // 坐标轴轴线
        show: false,
        lineStyle: {
          color: '#1C70B6'
        }
      },
      z: 100
    }],//Y轴配置
    tooltip: {
      trigger: 'axis'
    },
    grid: [{
      id: '', // 组件id，在配置中引用标识
      width: 10,
      height: 60,
      left: 0,
      top: -60,
      z: 100
    }],
    series: [{
      id: '', // 组件id，在配置中引用标识
      type: 'bar', // 柱状图
      barGap: 0, // 柱间距离
      barCategoryGap: 0, // 同一系列的柱间距离
      z: 100,
      itemStyle: { // 柱子样式
        normal: {
          color: '#F75D5D'
        }
      },
      tooltip: {
        show: true
      }
    }]
  }

  // 数据结构描述
  _dataPoolConfig = [
    {
      label: '地区名称',
      key: 'name',
      type: ['string'],
      limit: 1,
      description: '字段类型为「 字符类型 」',
      width: '50%'
    },
    {
      label: '地区经度',
      key: 'long',
      type: ['number', 'string'],
      limit: 1,
      description: '字段类型为「 数字类型 」或「 字符类型 」',
      width: '50%'
    },
    {
      label: '地区纬度',
      key: 'lat',
      type: ['number', 'string'],
      limit: 1,
      description: '字段类型为「 数字类型 」或「 字符类型 」',
      width: '50%'
    },
    {
      label: '数量',
      key: 'nums',
      type: ['number'],
      limit: 1,
      description: '字段类型为「 数字类型 」',
      width: '50%'
    }
  ]

  //样式配置描述信息
  _styleOptionConfig = [
    {
      label: '地图配置',
      bindKeys: '_group.map',
      controlType: 'group',
      controlValue: '',
      controlProps: {},
      controlConfigs: {}
    },
    {
      label: '区域展示',
      bindKeys: 'mapSeries.label.show',
      controlType: 'switch',
      controlValue: false,
      controlProps: {},
      controlConfigs: {}
    },
    {
      label: '区域悬浮展示',
      bindKeys: 'mapSeries.itemStyle.emphasis.label.show',
      controlType: 'switch',
      controlValue: false,
      controlProps: {},
      controlConfigs: {}
    },
    {
      label: '区域字体颜色',
      bindKeys: 'mapSeries.label.textStyle.color',
      controlType: 'color-picker',
      controlValue: '#000000',
      controlProps: {},
      controlConfigs: {}
    },
    {
      label: '地图颜色',
      bindKeys: 'mapSeries.itemStyle.areaColor',
      controlType: 'color-picker',
      controlValue: '#3FA3EB',
      controlProps: {},
      controlConfigs: {}
    },
    {
      label: '分割线颜色',
      bindKeys: 'mapSeries.itemStyle.borderColor',
      controlType: 'color-picker',
      controlValue: '#93EBF8',
      controlProps: {},
      controlConfigs: {}
    },
    {
      label: '高亮颜色',
      bindKeys: 'mapSeries.itemStyle.emphasis.areaColor',
      controlType: 'color-picker',
      controlValue: '#EFCA41',
      controlProps: {},
      controlConfigs: {}
    },
    {
      label: '高亮字体颜色',
      bindKeys: 'mapSeries.label.emphasis.textStyle.color',
      controlType: 'color-picker',
      controlValue: '#000000',
      controlProps: {},
      controlConfigs: {}
    },
    {
      label: '阴影颜色',
      bindKeys: 'option.geo.itemStyle.shadowColor',
      controlType: 'color-picker',
      controlValue: '#BDD3EF',
      controlProps: {},
      controlConfigs: {}
    },
    {
      label: '柱图配置',
      bindKeys: '_group.lines',
      controlType: 'group',
      controlValue: '',
      controlProps: {},
      controlConfigs: {}
    },
    {
      label: '提示框展示',
      bindKeys: 'lineStyle.itemStyle.tooltipShow',
      controlType: 'switch',
      controlValue: true,
      controlProps: {},
      controlConfigs: {}
    },
    {
      label: '底部位置展示',
      bindKeys: 'lineStyle.itemStyle.xAxisShow',
      controlType: 'switch',
      controlValue: true,
      controlProps: {},
      controlConfigs: {}
    },
    {
      label: '柱图颜色',
      bindKeys: 'lineStyle.itemStyle.color',
      controlType: 'color-picker',
      controlValue: '#E7390E',
      controlProps: {},
      controlConfigs: {}
    },
    // {
    //   label: '柱图宽度',
    //   bindKeys: 'lineStyle.itemStyle.width',
    //   controlType: 'input-number',
    //   controlValue: 10,
    //   controlProps: {},
    //   controlConfigs: {}
    // },
    // {
    //   label: '柱图最大高度',
    //   bindKeys: 'lineStyle.itemStyle.height',
    //   controlType: 'input-number',
    //   controlValue: 40,
    //   controlProps: {},
    //   controlConfigs: {}
    // },
    // {
    //   label: '柱图横向位置',
    //   bindKeys: 'lineStyle.itemStyle.left',
    //   controlType: 'input',
    //   controlValue: 0,
    //   controlProps: {},
    //   controlConfigs: {}
    // },
    // {
    //   label: '柱图纵向位置',
    //   bindKeys: 'lineStyle.itemStyle.top',
    //   controlType: 'input',
    //   controlValue: -40,
    //   controlProps: {},
    //   controlConfigs: {}
    // }
  ]

  // lineMaxHeight = (value) => {
  //   return 20 / value
  // }

  getOption({ dataList = [], dataTotal = 0, dataPoolField, styleOptionConfig = [], themeColor = [], themeStyle = {} }) {

    let { option, mapSeries, lineStyle } = this._transformStyleOptionConfig(styleOptionConfig)

    let defaultOption = deepClone(this._defaultOption),
      mapDefaultSeries = deepClone(this._defaultMapSeries),
      barOption = deepClone(this._barOption)

    // 再合并自定义配置项
    if (defaultOption && option) defaultOption = mergeObject(defaultOption, option)
    if (mapDefaultSeries && mapSeries) mapDefaultSeries = mergeObject(mapDefaultSeries, mapSeries)

    let left = barOption.grid[0].left,
      top = barOption.grid[0].top

    if (lineStyle && barOption) {
      barOption.series[0].tooltip.show = lineStyle.itemStyle.tooltipShow
      barOption.series[0].itemStyle.normal.color = lineStyle.itemStyle.color ? lineStyle.itemStyle.color : '#E7390E'
      barOption.xAxis[0].show = lineStyle.itemStyle.xAxisShow
      // barOption.grid[0].width = lineStyle.itemStyle.width ?? 0
      // barOption.grid[0].height = lineStyle.itemStyle.height ?? 0

      // left = lineStyle.itemStyle.left ? parseFloat(lineStyle.itemStyle.left) : 0
      // top = lineStyle.itemStyle.top ? parseFloat(lineStyle.itemStyle.top) : 0
    }

    defaultOption.series.push({
      ...mapDefaultSeries
    })

    let _defaultOption = {
      mapOption: defaultOption,
      barOption,
      left,
      top,
      data: [],
    }

    if (dataPoolField.name.length && dataPoolField.long.length && dataPoolField.lat.length && dataPoolField.nums.length) {
      let name = dataPoolField.name[0].fieldName,
        long = dataPoolField.long[0].fieldName,
        lat = dataPoolField.lat[0].fieldName,
        nums = dataPoolField.nums[0].fieldName

      _defaultOption.data = dataList.reduce((r, c) => {
        r.push({
          name: c[name],
          coord: [parseFloat(c[long]), parseFloat(c[lat])],
          value: c[nums],
          tooltipFieldName: nums
        })
        return r
      }, []).sort((a, b) => { return b.value - a.value })
    }

    return _defaultOption
  }

  getClickData(event) {
    const { name, seriesType, value } = event
    if(seriesType === 'map') {
      return {
        label: name,
        value: name
      }
    }
  }
}
